<!DOCTYPE html>
<html lang="zh-CN">
<#include "../../common/head.ftl">
<body>
<h1 class="text text-info">模态框插件</h1>

<#--
fade:表示模态框会有淡入淡出效果;

tabindex:值设置为-1的话,表示取消焦点(比如如果焦点不在模态框上的话,
        按esc键不会关闭模态框,只有焦点在模态框上面,按esc键模态框才会关闭,
        当然,要看到这个效果的前提是你没有在按钮上使用data-keyboard=false来禁用键盘事件);

data-dismiss:值为modal表示点击可以关闭模态框;
-->
<div class="modal fade" id="mymodal3" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-titile">
                    这是标题3
                </h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="col-md-4">内容3</div>
                    <div class="col-md-4">内容3</div>
                    <div class="col-md-4">内容3</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default">按钮3</button>
                <button class="btn btn-default">按钮3</button>
            </div>
        </div>
    </div>
</div>

<#--
这里使用jQuery来实现点击按钮弹出模态框
-->
<button id="btnModal3" class="btn btn-primary">点击弹出模态框3</button>

<#include "../../common/footer.ftl">
<script>
    //模态框初始化设置
    $('#mymodal3').modal({
        show:false,
        backdrop:'static',
        keyboard:false
    });
    //点击按钮弹出模态框
    $('#btnModal3').on('click', function(){
        $('#mymodal3').modal('show');
    });

    //模态框的几个事件
    $('#mymodal3').on('show.bs.modal', function(){
        alert("在show方法被调用时立即触发");
    });

    $('#mymodal3').on('shown.bs.modal', function(){
       alert("在模态框完全弹出之后触发")
    });

    $('#mymodal3').on('hide.bs.modal', function(){
        alert("在hide方法被调用时立即触发")
    });

    $('#mymodal3').on('hidden.bs.modal', function(){
        alert("在模态框被完全关闭后触发")
    });

</script>
</body>
</html>